<template>
  <view class="main signUpPage">
    <u-form labelPosition="left" :model="formData" ref="form1" label-width="90">
      <u-form-item label="活动主题" prop="userInfo.phone" borderBottom>
        <u-input v-model="formData.activityName" disabled disabled-color="#ccd9fb" border="none"></u-input>
      </u-form-item>
      <u-form-item label="作品上传" prop="userInfo.phone" borderBottom>
        <view class="scImg">
          <view class="scBox" v-if="!formData.picture" @click="uploadImg">
            <u-icon name="plus" bold size="26"></u-icon>
            <view>上传参赛作品</view>
            <view>支持JPG/GIF/PNG格式 RGB模式，不超过20M</view>
          </view>
          <view v-else style="width: 100%; height: 100%">
            <image :src="formData.picture" mode="aspectFill" />
            <view class="closeBox" @click="formData.picture = ''">
              <u-icon name="close"></u-icon>
            </view>
          </view>
        </view>
      </u-form-item>
      <u-form-item label="作品名称" prop="userInfo.phone" borderBottom>
        <u-input v-model="formData.name" placeholder="请输入" border="none"></u-input>
      </u-form-item>

      <u-form-item label="作品简介" prop="userInfo.phone" borderBottom>
        <u-textarea v-model="formData.introduce" style="background-color: #ccd9fb" height="200" maxlength="100" border="none" placeholder="在这里分享你的想法..." count></u-textarea>
      </u-form-item>
    </u-form>
    <view class="buttomBox">
      <u-button color="#3B70FD" @click="submit" shape="circle">发布公开</u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { signUp } from "@/api/home";
import { BASE_UPLOADURL } from "@/utils/request";
import { ref } from "vue";
const { activityId, activityName } = defineProps<{
  activityId: string;
  activityName: string;
}>();
const formData = ref({
  activityId,
  activityName,
  name: "",
  picture: "",
  introduce: "",
});
const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes, "uploadFileRes");
            formData.value.picture = JSON.parse(uploadFileRes.data).data.url;
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
        });
      }
    },
  });
};
const submit = async () => {
  let errMsg = "";

  if (!formData.value.introduce) {
    errMsg = "请输入作品简介";
  }
  if (!formData.value.picture) {
    errMsg = "请输入上传作品";
  }
  if (!formData.value.name) {
    errMsg = "请输入作品名称";
  }
  if (errMsg) {
    uni.showToast({
      title: errMsg,
      icon: "none",
    });
    return;
  } else {
    await signUp(formData.value);
    uni.showToast({
      title: "发布成功",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  }
};
</script>
<style lang="less" scoped>
.signUpPage {
  /deep/.u-input {
    height: 80rpx;
    background: #ccd9fb;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.25);
    padding: 25rpx 20rpx !important;
  }
  /deep/.uni-input-input {
    padding-left: 16rpx;
    padding-right: 16rpx;
  }
  /deep/.u-form-item__body__left {
    align-items: baseline;
  }
  /deep/.uni-input-placeholder {
    padding-left: 16rpx;
  }
  /deep/.u-textarea {
    background-color: #ccd9fb !important;
    color: #000;
  }
  /deep/ .u-textarea__count {
    background-color: #ccd9fb !important;
  }
  background: linear-gradient(125deg, #ccd9fb 0%, #ffffff 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  height: 100vh;
}
.scBox {
  text-align: center;
  background: #ccd9fb;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 50rpx 130rpx;
  font-size: 24rpx;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  & > view {
    margin-top: 16rpx;
  }
}
.scImg {
  width: 275px;
  height: 150px;
  image {
    width: 100%;
    height: 100%;
    background: salmon;
  }
  position: relative;
}
.closeBox {
  position: absolute;
  right: 5rpx;
  top: 5rpx;
}
</style>
